<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSP Test - 产品列表</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f5f5f5;
    }
    h1 {
        color: #333;
        text-align: center;
    }
    .container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 30px;
    }
    .product-list {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 20px;
        width: 300px;
    }
    .product-list h2 {
        color: #2c3e50;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }
    .product {
        margin: 15px 0;
        padding: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    .product h3 {
        margin: 0 0 5px 0;
        color: #3498db;
    }
    .price {
        color: #e74c3c;
        font-weight: bold;
    }
    .rating {
        color: #f39c12;
    }
</style>
</head>
<body>
<h1>产品列表展示</h1>
<p>Following is an expression executed on serverside：</p>

<div class="container">
<%
    // 电子产品列表
    String[][] electronics = {
        {"iPhone 14", "999.99", "4.8"},
        {"MacBook Pro", "2499.99", "4.9"},
        {"Samsung TV", "799.99", "4.5"}
    };
    
    // 书籍列表
    String[][] books = {
        {"Java Programming", "49.99", "4.7"},
        {"Spring Framework", "59.99", "4.6"},
        {"JSP & Servlets", "39.99", "4.4"}
    };
    
    // 服装列表
    String[][] clothing = {
        {"Cotton T-Shirt", "19.99", "4.3"},
        {"Denim Jeans", "59.99", "4.5"},
        {"Winter Jacket", "129.99", "4.7"}
    };
    
    // 打印电子产品列表
    out.println("<div class='product-list'>");
    out.println("<h2>电子产品</h2>");
    for (String[] product : electronics) {
        out.println("<div class='product'>");
        out.println("<h3>" + product[0] + "</h3>");
        out.println("<p class='price'>价格: $" + product[1] + "</p>");
        out.println("<p class='rating'>评分: " + product[2] + "/5</p>");
        out.println("</div>");
    }
    out.println("</div>");
    
    // 打印书籍列表
    out.println("<div class='product-list'>");
    out.println("<h2>书籍</h2>");
    for (String[] product : books) {
        out.println("<div class='product'>");
        out.println("<h3>" + product[0] + "</h3>");
        out.println("<p class='price'>价格: $" + product[1] + "</p>");
        out.println("<p class='rating'>评分: " + product[2] + "/5</p>");
        out.println("</div>");
    }
    out.println("</div>");
    
    // 打印服装列表
    out.println("<div class='product-list'>");
    out.println("<h2>服装</h2>");
    for (String[] product : clothing) {
        out.println("<div class='product'>");
        out.println("<h3>" + product[0] + "</h3>");
        out.println("<p class='price'>价格: $" + product[1] + "</p>");
        out.println("<p class='rating'>评分: " + product[2] + "/5</p>");
        out.println("</div>");
    }
    out.println("</div>");
%>
</div>

</body>
</html>